<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
       
        body{
            margin: 0;
           
            background: linear-gradient(to right , rgba(0,153,153,1),rgba(0,51,51,1))
        }
        #ouside{
           width: 600px;
           /*border: solid 5px #27075d;*/
           margin: 200px auto;
           text-align: center;
           box-shadow: 0px -10px 50px black;   
        }
        #top{
            
            font-size: 60px;
            display: inline-block;
            /*border: solid 1px #27075d;*/
            padding: 0 20px;
            border-top: none;
            box-shadow: 0px 0px 30px black;
            color:#003333;
            
        }
        #middle{
            font-size: 150px;
            color: #f2f2f2;
            /*color:#FFFFCC  ;*/
            text-shadow: 0px 0px 50px black;
           
        }
        #bottom{
            font-size: 40px;
            color:#003333;
            
            
        }
    </style>
</head>
<body>
    <div id="ouside">
        <div id="top">年</div>
        <div id="middle">时间</div>
        <div id="bottom">日期</div>

    </div>
    <script>


        var tt =document.getElementById("top");
        var mm =document.getElementById("middle");
        var bb =document.getElementById("bottom");
        
        function cc(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            second = second<10?("0"+second):second;
            minute = minute<10?("0"+minute):minute;
            hour = hour<10?("0"+hour):hour;
            switch(week){
                case 0 :week="日";
                break;
                case 1 :week="一";
                break;
                case 2 :week="二";
                break;
                case 3 :week="三";
                break;
                case 4 :week="四";
                break;
                case 5 :week="五";
                break;
                case 6 :week="六";
                break;
                
            }
            tt.innerText=year;
            mm.innerText=hour+":"+minute+":"+second;
            bb.innerText=month+"月"+date+"日"+"  "+"星期"+week;
        }
        cc();
        setInterval(cc,1000);

        














    </script>
</body>
</html>